@import "variable"; //主频道
//头部
header {
    .logo {
        a {
            background: url("../img/logo-201305.png") no-repeat 0 0;
        }
    }
    .search_text {
        border: 1px solid @fenlei_item_d;
        border-width: 2px 0 2px 2px;
    }
    .btn_search {
        background: @fenlei_item_d;
    }
}
//导航
nav {
    border-bottom: 2px solid @fenlei_item_d;
    margin-bottom: 0;
    #nav {
        background: @fenlei_item_d;
    }
    .dt {
        a {
            background: @fenlei_item_d;
            color: @font_white;
        }
        .icon-xia {
            color: @font_white;
        }
    }
    .dd_inner {
        background: transparent;
        .item {
            height: 57px;
            border-left: 1px solid @fenlei_item_d;
            color: @font_white;
            h3 {
                .rel();
                height: 28px;
                padding: 5px 5px 3px 10px;
                font: 700 14px/18px "microsoft yahei";
            }
            a {
                color: @font_white;
            }
        }
    }
    .dd {
        height: 456px;
        background: @fenlei_item;
    }
    .selected {
        color: @font_white !important;
        background: @fenlei_item_bg !important;
        a {
            color: @font_white !important;
        }
    }
    .dd_layer {
        display: none;
        height: 456px !important;
        width: 483px !important;
        background: @font_white;
        border-color: @fenlei_item_d;
        overflow: hidden;
    }
    .layer {
        height: 100%;
        display: none;
        margin-left: 2px;
    }
    .lists {
        width: 230px;
        height: 100%;
        .fl();
        dl {
            padding-left: 23px;
            line-height: 30px;
            &:first-child dt {
                border-top: 0;
            }
        }
        dt {
            padding-top: 10px;
            width: 195px;
            .font-w700();
            border-top: 1px solid @fenlei_item_d;
            a {
                color: @fenlei_item_d;
            }
        }
        dd {
            padding-bottom: 10px;
            overflow: hidden;
            a {
                .fl();
                width: 72px;
                color: @fenlei_item;
            }
        }
    }
    .imgs {
        border-left: 1px solid @fenlei_item_d;
        width: 242px;
        height: 100%;
        .fl();
        h4 {
            margin: 0;
            .font-s12();
            padding-top: 10px;
            line-height: 30px;
            color: @fenlei_item_d;
        }
    }
    .brands {
        padding-left: 20px; //          height: 272px;
        overflow: hidden;
        a {
            .fl();
            margin: 4px 16px 4px 0;
            width: 94px;
            height: 40px;
        }
        img {
            width: 94px;
            height: 40px;
            border: 0;
        }
    }
    .activity {
        padding-left: 20px; //          height: 370px;
        overflow: hidden;
        h4 {
            padding-top: 0;
        }
        a {
            display: block;
            margin-bottom: 5px;
        }
        img {
            width: 202px;
            height: 90px;
            border: 0;
        }
    }
    #navitems {
        a {
            color: @font_grey_3;
            &:hover {
                color: @fenlei_item;
            }
        }
    }
}
//轮播图等内容
#content {
    .container {
        .rel();
    }
    .slider {
        margin-left: 209px;
        height: 456px;
        a {
            display: block;
            width: 100%;
            height: 100%;
        }
        img {
            width: 100%;
            height: 100%;
            border: 0;
            padding: 0;
        }
        p {
            .font-s20();
            .abs();
            left: 50%;
            top: 20%;
        }
    }
    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background-color: @font_white;
        opacity: 1;
    }
    .swiper-pagination-bullet-active {
        background: @fenlei_item;
    }
    .small_activity {
        .abs();
        top: 0;
        right: 0;
        height: 100%;
        z-index: 10;
        ul {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 0;
            height: 100%;
        }
        a {
            display: block;
        }
        img {
            width: 220px;
            height: 150px;
            border: 0;
            padding: 0;
        }
    }
}
//分频道的活动分类区
.c {
    width: 100%;
    img {
        background: #f7f7f7;
    }
    .container {
        width: 1210px !important;
        margin-bottom: 10px;
    }
    .mt {
        margin-top: 25px;
        height: 50px;
        .rel();
        h3 {
            font: 20px/50px "Microsoft Yahei";
        }
        .more {
            .abs();
            right: 15px;
            top: 25px;
        }
    }
}
//今日热门
#hot {
    .hot_nav {
        overflow: hidden;
        margin-bottom: 0;
        li {
            width: 302px;
            .fl();
            height: 40px;
            border-top: 1px solid #4d4d4d;
            font: 14px/40px "Microsoft Yahei";
            color: #4d4d4d;
            text-align: center;
            background: @bg_light_grey;
            transition: all 0.3s ease;
            &:first-child {
                border-left: 1px solid @border_grey;
            }
            &:last-child {
                border-right: 1px solid @border_grey;
            }
        }
        i {
            .rel();
            display: inline-block;
            width: 17px;
            height: 17px;
            margin: 0 8px -4px 0;
            background: url("../img/bg.png");
        }
        span {
            display: inline-block;
            .rel();
        }
        .icon1 {
            background-position: 0 -114px;
        }
        .icon2 {
            background-position: 0 -136px;
        }
        .icon3 {
            background-position: 0 -182px;
        }
        .icon4 {
            background-position: 0 -227px;
        }
        .selected {
            background: #4d4d4d;
            color: @font_white;
            .icon1 {
                background-position: 0 -89px;
            }
            .icon2 {
                background-position: 0 -158px;
            }
            .icon3 {
                background-position: 0 -203px;
            }
            .icon4 {
                background-position: 0 -249px;
            }
        }
    }
    .hot_content {
        .rel();
        height: 351px;
    }
    .hot_item.selected {
        display: block;
    }
    .hot_item {
        .abs();
        overflow: hidden;
        display: none;
    }
    .item {
        .fl();
        width: 241px;
        height: 350px;
        border-left: 1px solid @border_grey;
        border-bottom: 1px solid @border_grey;
        &:last-child {
            width: 244px;
            border-right: 1px solid @border_grey;
        }
        &:hover {
            img {
                transform: scale(0.95);
            }
            .buy_btn {
                transform: translateY(-40px);
            }
        }
    }
    .p_img {
        text-align: center;
        margin: 10px 0 15px;
        overflow: hidden;
    }
    img {
        width: 200px;
        height: 200px;
        transition: all 0.3s linear;
    }
    .p_name {
        height: 36px;
        padding: 0 20px;
        overflow: hidden;
    }
    .p_price {
        padding-left: 20px;
        color: @price_red;
        height: 48px;
        font: 20px/48px "Microsoft Yahei";
    }
    .buy_btn {
        .rel();
        top: 43px;
        display: block;
        background: @price_red;
        height: 38px;
        text-align: center;
        font: 14px/38px "Microsoft Yahei";
        transition: all 0.3s ease;
        a {
            color: @font_white;
        }
    }
}
//brand品牌馆
#brand {
    .brands_left {
        .fl();
        width: 330px;
        overflow: hidden;
        img {
            width: 330px;
            height: 320px;
        }
    }
    .brands_right {
        width: 880px;
        .rel();
        .fr();
        height: 320px;
        .brands_item,
        ul {
            .rel();
            width: 100%;
            height: 160px;
            margin: 0;
        }
        li {
            width: 24.7%;
            height: 100%;
            display: inline-block;
        }
        a,
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
        .brand_btn{
            display: none;
        }
        &:hover .brand_btn{
            display: block;
        }
    }
}
//sale特价优惠
#sale {
    .sale_box {
        border: 1px solid @border_grey;
    }
    .sale_item {
        width: 240px;
        height: 330px;
        padding: 20px 25px 0;
        border-right: 1px solid @border_grey;
        border-left: 1px solid @border_grey;
    }
    .p_img {
        width: 190px;
        height: 200px;
        margin-bottom: 7px;
        padding: 0;
        img {
            width: 190px;
            height: 200px;
        }
    }
    .p_name {
        height: 36px;
        overflow: hidden;
        margin-bottom: 7px;
        line-height: 18px;
        font: 400 12px/18px '\5fae\8f6f\96c5\9ed1';
        color: @font_grey_3;
    }
    .p_price {
        .rel();
        padding-top: 27px;
        overflow: hidden;
        b {
            .abs();
            left: 2px;
            top: 0;
            z-index: 1;
            overflow: hidden;
            width: 45px;
            height: 19px;
            background: url("../img/i2014101701.png") no-repeat;
            text-align: center;
            font: 400 12px/16px '\5b8b\4f53';
            color: @font_white;
        }
        .down {
            display: inline-block;
            font: 400 14px/16px arial;
        }
        strong {
            font: 700 16px/1em '\5fae\8f6f\96c5\9ed1';
            color: @font_grey_3;
        }
        del {
            font: 400 12px/16px '\5fae\8f6f\96c5\9ed1';
            color: @font_dark_grey;
        }
    }
}
//各子分类推荐
.pro {
    .mc {
        height: 540px;
    }
    .com_left {
        .fl();
        height: 100%;
        width: 240px;
        margin-right: 10px;
        img {
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
        }
    }
    .com_right,
    .pro_list {
        .fl();
        width: 960px;
        height: 100%;
        margin: 0;
        padding: 0;
        li {
            display: inline-block;
            .fl();
            width: 240px;
            height: 270px;
            margin: 0;
            padding: 0;
        }
        img {
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
            transition: all 0.3s linear;
            &:hover {
                transform: scale(1.05);
            }
        }
    }
}
//固定导航条
#elevator {
    padding-top: 40px;
    width: 40px;
    overflow: hidden;
    z-index: 5;
    position: fixed;
    left: 40px;
    bottom: 70px;
    display: block;
    ul{
        display: none;
    }
    ul,
    li {
        margin: 0;
    }
    .handler {
        border: 1px solid @font_grey;
        background: @font_white;
        width: 40px;
        height: 40px;
        line-height: 17px;
        text-align: center;
        overflow: hidden;
        margin-top: -1px;
        cursor: pointer;
        a {
            display: block;
            height: 38px;
            margin: 0 auto;
            .font-s12();
            color: @font_dark_grey;
            padding: 2px 4px;
            width: 40px;
            &:hover {
                color: @font_dark_grey;
            }
        }
    }
    .current {
        color: @font_white !important;
        background: @fenlei_item;
    }
}